<template>
	<div id="appreg">
		<div id="reg">
			<div class="posreg" v-loading="loading">
				<div class="adminreg">{{$store.state.AppName}}</div>
				<div class="example-block">
					<span class="example-demonstration">请选择类型</span>
					<el-cascader v-model="value" :options="options" style="width: 200px;" placeholder="选择"/>
				</div>
				<br />
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
				 style="width: 600px;">
					<el-row>
						<el-form-item label="工 号：" prop="idpass">
							<el-input prefix-icon="el-icon-user" style="width: 150px" type="text" v-model="ruleForm.idpass" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="性 别：" prop="sex">
							<el-radio-group v-model="sex">
								<el-radio label="male" size="large">男</el-radio>
								<el-radio label="famale" size="large">女</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item label="密 码：" prop="checkPass">
							<el-input prefix-icon="el-icon-menu" style="width: 150px" show-password type="password" v-model="ruleForm.checkPass"
							 autocomplete="off"></el-input>
						</el-form-item>
						<div class="block">
							<span class="demonstration" style="margin-left: 20px;">出生日期：</span>
							<el-date-picker v-model="ruleForm.birth" type="date" placeholder="请选择日期" :size="size" style="width: 9.375rem;" />
						</div>
					</el-row>
					<el-row>
						<el-form-item label="确认密码：" prop="recheckPass">
							<el-input prefix-icon="el-icon-menu" style="width: 150px" show-password type="password" v-model="ruleForm.recheckPass"
							 autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="电话号码：" prop="phone">
							<el-input prefix-icon="el-icon-menu" style="width: 150px" type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item label="姓 名：" prop="username">
							<el-input prefix-icon="el-icon-menu" style="width: 150px" type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="家庭住址：" prop="address">
							<el-input prefix-icon="el-icon-menu" style="width: 150px" type="text" v-model="ruleForm.address" autocomplete="off"></el-input>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item>
							<el-button type="primary" style="width: 100px;" @click="submitForm('ruleForm')">注册</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" style="width: 100px;" @click="toReturn">返回</el-button>
						</el-form-item>
					</el-row>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		name: "app",
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入工号"));
				} else {
					if (this.ruleForm.checkPass !== "") {
						this.$refs.ruleForm.validateField("checkPass");
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else if (value.length < 8 || value.length > 13) {
					callback(new Error("长度必须在8-12之内!"));
				} else {
					callback();
				}
			};
			var validatePass3 = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请再次输入密码"));
				} else if (value !== this.ruleForm.checkPass) {
					callback(new Error("两次密码不同"));
				} else if (value.length < 8 || value.length > 13) {
					callback(new Error("长度必须在8-12之内!"));
				} else {
					callback();
				}
			}
			var usernamePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入姓名"));
				} else {
					callback();
				}
			}
			var phonePass=(rule,value,callback)=>{
				if(value===""){
					callback(new Error("请输入电话号码"))
				}else{
					callback()
				}
			}
			var addressPass=(rule,value,callback)=>{
				if(value===""){
					callback(new Error("请输入家庭住址"))
				}else{
					callback()
				}
			}
			return {
				loading: false,
				ruleForm: {
					idpass: "",
					checkPass: "",
					recheckPass: "",
					username: "",
					birth: new Date(),
					phone: "",
					address: ""
				},
				rules: {
					idpass: [{
						validator: validatePass,
						trigger: "blur"
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: "blur"
					}],
					recheckPass: [{
						validator: validatePass3,
						trigger: "blur"
					}],
					username:[{
						validator:usernamePass,
						trigger:"blur"
					}],
					phone:[{
						validator:phonePass,
						trigger:"blur"
					}],
					address:[{
						validator:addressPass,
						trigger:"blur"
					}]
				},
				options: [{
						value: 'staff',
						label: '员工'
					},
					{
						value: 'manager',
						label: '经理'
					}
				],
				sex: ref('male')
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.loading = true;
						setTimeout(() => {
							this.loading = false;
						}, 2000);
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			toReturn() {
				this.$router.push('/login')
			},
		},
	};
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	#appreg {
		font-family: "Avenir", Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		width: 100%;
		height: 100%;
		background: url("../../assets/img/login_bg.jpg");
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	#reg {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -200px;
		margin-left: -300px;
		width: 600px;
		height: 400px;
		background: #fff;
		border-radius: 10%;
		box-shadow: 8px 10px 10px rgb(177, 223, 242);
	}

	.adminreg {
		margin: 20px 0;
		text-shadow: 10px 13px 3px rgb(207, 207, 207);
		text-align: center;
	}

	.posreg {
		width: 550px;
		height: 350px;
		position: absolute;
		top: 25px;
		left: 25px;
	}
</style>
